import React, { Component, createRef } from 'react'

export default class index extends Component {
  ref = createRef()
  state = {
    input1: ''
  }
  input1Change = (e) => {
    this.setState({ input1: e.target.value })
  }
  submit =() => {
    console.log(this.ref.current.value)
  }
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">受控组件</div>
          <div className="box-body">
            <div className="box-content">
              <input value={this.state.input1} onChange={this.input1Change} />
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">非受控组件</div>
          <div className="box-body">
            <div className="box-content">
              <form>
                <input ref={this.ref} />
                <button type="button" onClick={this.submit}>submit</button>
              </form>
            </div>
          </div>
        </div>
      </>
    )
  }
}
